import styled from '@emotion/styled';
import { Carousel, Tabs } from 'antd';
import { CarouselRef } from 'antd/lib/carousel';
import React, { useEffect, useRef, useState } from 'react';
import UserInfo, { IUserData } from './UserInfo';
import { useTranslation } from 'react-i18next';
import useSyncState from '../hooks/useSyncState';
import BusinessInforMation from './BusinessInforMation';
import CustomerInforMation from './CustomerInforMation';

interface IUserInfo {
	width?: string;
	height?: string;
	classname?: string;
	usersInfo: IUserData[];
}

const leftArrow = require('@/assets/img/left_arrow.png');
const rightArrow = require('@/assets/img/right_arrow.png');

const LeftArrow = styled.span`
	position: absolute;
	display: inline-block;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: url(${leftArrow}) no-repeat center;
	background-size: contain;
	cursor: pointer;
	z-index: 10;
`;
const RightArrow = styled.span`
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(${rightArrow}) no-repeat center;
	background-size: contain;
	cursor: pointer;
	z-index: 10;
`;

const HandlerBox = styled.div`
	width: 100%;
	cursor: row-resize;
	z-index: 1;
	left: 200px;
	height: 10px;
	overflow: auto;
	position: absolute;
	bottom: 0;
	left: 0;
`;

const Container = styled.div`
	position: relative;
	background: #ffffff;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
	border-radius: 2px;
	margin-bottom: 10px;
`;

const Box = styled.div`
	overflow: auto;
	.ant-carousel {
		width: 334px;
	}
`;

const CustomerInforMationTab = styled.span`
	font-size: 13px;
	font-weight: ${(props: { tab: string }) => (props.tab === 'customer' ? '600' : '400')};
	cursor: pointer;
	color: ${(props: { tab: string }) => (props.tab === 'customer' ? '#2d2d2d' : '#666666')};
`;

const BusinessInforMationTab = styled.span`
	font-size: 13px;
	font-weight: ${(props: { tab: string }) => (props.tab === 'business' ? '600' : '400')};
	color: ${(props: { tab: string }) => (props.tab === 'business' ? '#2d2d2d' : '#666666')};
	margin-left: 22px;
	cursor: pointer;
`;

const UserInforMationLabel = styled.p`
	margin-bottom: 10px;
	margin-top: 12px;
	margin-left: 14px;
`;

const index = (props: IUserInfo) => {
	const { width = '100%', height = '216px', classname = '', usersInfo = [] } = props;
	const classnames = `widget-userinformation-box ${classname}`;
	const { t } = useTranslation();

	const [tab, setTab] = useSyncState<string>('customer');

	const onChange = (current: number) => {
		console.log(current);
	};

	const changeLeftArrow = () => {
		swiperRef.current?.prev();
	};

	const changeRightArrow = () => {
		swiperRef.current?.next();
	};

	const swiperRef = useRef<CarouselRef>(null);

	let DetailStore: any = { dragable: false, oldY: '', midHeight: '', endHeight: '' };

	const drag = (e: any) => {
		let containerMainHeight: any = document.getElementById('chat-main-wrapper')?.offsetHeight;
		let imContainer: any = document.getElementById('widget-message-box');
		DetailStore.dragable = true;
		DetailStore.oldY = e.pageY;
		DetailStore.midHeight = document.getElementById('user-info-matiom')?.offsetHeight;
		document.onmousemove = event => {
			if (DetailStore.dragable && DetailStore.midHeight !== 0) {
				let y = event.pageY - e.pageY + DetailStore.midHeight;
				if (y >= imContainer.offsetHeight || y <= 216) {
					return;
				}
				DetailStore.endHeight = y + 'px';
				let div = document.getElementById('user-info-matiom');
				let scroll = document.getElementById('scroll-box');
				div!.style.height = y + 'px';
				scroll!.style.height = y + 'px';
				imContainer.style.height = containerMainHeight - y - 10 + 'px';
				y = null;
			}
		};
		document.onmouseup = () => {
			if (DetailStore.dragable) {
				DetailStore.midHeight = DetailStore.endHeight;
			}
			DetailStore.oldY = 0;
			DetailStore.dragable = false;
		};
	};

	return (
		<Container>
			<div className={classnames} style={{ width: width, height: height }} id="user-info-matiom">
				<Box id="scroll-box" style={{ height: height }}>
					<div>
						<UserInforMationLabel>
							<CustomerInforMationTab tab={tab()} onClick={() => setTab('customer')}>
								{t('customer-information')}
							</CustomerInforMationTab>
							<BusinessInforMationTab tab={tab()} onClick={() => setTab('business')}>
								{t('business-information')}
							</BusinessInforMationTab>
						</UserInforMationLabel>
						{/* <UserInfo {...user}></UserInfo> */}
						{tab() === 'customer' ? <CustomerInforMation /> : <BusinessInforMation />}
					</div>
				</Box>
			</div>
			<HandlerBox id="handler" onMouseDown={drag}></HandlerBox>
		</Container>
	);
};

export default index;
